<script setup lang="ts">
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetTransferListApi } from '@/api/finance';
  import { Tag } from '@/components/InfoTag';

  const info = ref({});
  const statusText = ['未支付', '已成功', '已过期', '已冻结'];

  const [registerTable, { getRawDataSource }] = useTable({
    title: '余额互转记录',
    canResize: true,
    columns: [
      {
        title: '执行代理',
        dataIndex: 'userName',
      },
      {
        title: '订单号',
        dataIndex: 'orderNo',
      },
      {
        title: '转出金额',
        dataIndex: 'amount',
      },
      {
        title: '接收代理',
        dataIndex: 'outName',
      },
      {
        title: '接受地址',
        dataIndex: 'address',
      },
      {
        title: '转出状态',
        dataIndex: 'status',
      },
      {
        title: '收款信息',
        dataIndex: 'message',
      },
      {
        title: '转出时间',
        dataIndex: 'create_time',
      },
      {
        title: '成功时间',
        dataIndex: 'update_time',
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetTransferListApi,
    takeCare: '这是注意事项',
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value = data;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'userName',
          label: '精准/模糊',
          component: 'Input',
          colProps: {
            span: 6,
          },
          componentProps: {
            placeholder: '请输入代理账号',
          },
        },
      ],
    },
    rowKey: 'id',
  });
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <Tag title="今日成功充值" color="red">123</Tag>
            <Tag title="昨日成功充值" color="red">123</Tag>
            <Tag title="全部成功充值" color="red">123</Tag>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD') }}
            </template>
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{
              record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方'
            }}</template>
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status < 2 ? 'green' : 'red'">{{
                statusText[record.status]
              }}</a-tag>
            </template>
            <template v-if="column.key === 'rate'">
              <a-tag color="#c78787">{{ record.rate }}%</a-tag>
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
